<template>
  <div class="my-component">
    <el-table 
      :data="templateData" 
      style="width: 100%"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
      <el-table-column
        v-for="(col, index) in columns"
        :key="index"
        :prop="col.prop"
        :label="col.label"
      >
        <template v-slot="scope">
          <span v-if="col.prop === 'name'">
            <span v-if="scope.row.require === 1" class="required">*</span>
            {{ scope.row.name }}
          </span>
          <span v-else-if="col.prop === 'value'">
            {{ scope.row.type }}
            <template v-if="scope.row.type === 'string'">
              
              <el-input 
                v-model="scope.row.value" 
                placeholder="String类型"
                :controls="true"
                controls-position="right"
                ></el-input>
            </template>
            <template v-else-if="scope.row.type === 'number'">
              <el-input-number 
                v-model="scope.row.value" 
                :min="0"
                :controls="true"
                placeholder="Number类型"
                controls-position="right"
                ></el-input-number>
            </template>
            <template v-else-if="scope.row.type === 'boolean'">
              <el-switch  
                class="switch-container" 
                v-model="scope.row.value"
                :controls="true"
                placeholder="Boolean类型"
                controls-position="right"
                ></el-switch>
            </template>
            <!-- <template v-else-if="scope.row.type === 'object'"></template> -->
            <template v-else>
              <el-input 
                v-model="scope.row.value" 
                placeholder="请输入"
                ></el-input>
            </template>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="handleSave" type="primary">提交</el-button>
  </div>
</template>

<script>
export default {
  name: 'formPage',
  props: {
  },
  data() {
    return {
      // templateData: [
      //   {
      //     name:'Boolean类型',
      //     code:'can',
      //     fillRule:'',
      //     fillValue:'',
      //     required:'1',
      //     type:'boolean',
      //   }
      // ],
      templateData:[
        {
          name:'渠道下查询活动离职req',
          required:'0',
          type:'object',
          code:'actCalenederReq',
          fillRule:'',
          fillValue:'',
          checkRule:'',
          children:[
          {
            name:'belongSpecialReg名称',
            required:'0',
            type:'number',
            code:'belongSpecialReg',
            fillRule:'',
            fillValue:'',
            checkRule:'',
            children: [],
          },
          {
            name:'pageSize名称',
            required:'0',
            type:'integer',
            code:'pageSize',
            fillRule:'',
            fillValue:'',
            checkRule:'',
            children: [],
          },
          {
            name:'phoneData名称',
            required:'0',
            type:'integer',
            code:'phoneData',
            fillRule:'',
            fillValue:'',
            checkRule:'',
            children: [],
          },
          ]
        }
        ],
      columns: [
        { prop: 'name', label: '参数名称' },
        { prop: 'value', label: '参数值' }
      ],
    };
  },
  methods: {
    handleSave() {
      let templateDataFin = this.initializeTemplateData(this.templateData);
      let params = {
        path: {}
      }
      params.path = this.convertTestDataToParamsAAA(templateDataFin);
      console.log('params', params);
      
    },
    //双向绑定 (v-model) 确实会在用户修改输入值时更新数据模型。如果你希望在提交时确保所有参数都有默认值，即使用户没有修改输入值，你可以在数据初始化时为每个参数设置默认值。
    initializeTemplateData(data) {
      return data.map(item => {
        switch (item.type) {
          case 'boolean':
            item.value = item.value !== undefined ? item.value : false;
            break;
          case 'number':
          case 'integer':
            item.value = item.value !== undefined ? item.value : 0;
            break;
          case 'string':
            item.value = item.value !== undefined ? item.value : '';
            break;
          case 'object':
            item.value = item.value !== undefined ? item.value : {};
            if (item.children && item.children.length > 0) {
              item.children = this.initializeTemplateData(item.children);
            }
            break;
          default:
            item.value = item.value !== undefined ? item.value : null;
        }
        return item;
      });
    },
    convertTestDataToParamsAAA(templateDataFin) {
      // 转换树形数组为树形对象
        const treeObject = this.convertTree(templateDataFin);
        console.log("treeObject",treeObject);
        return treeObject;
        // if(Object.keys(treeObject).length == 0) {
        //   return treeObject;
        // }
        //   // 提取所有顶层 key 的值并赋给 params 对象
        //   for (const key in treeObject) {
        //     if (Object.prototype.hasOwnProperty.call(treeObject, key)) {
        //       return treeObject[key];
        //     }
        //   }
        //   return {}
    },
    convertTree(nodes) {
      let result = {};
      nodes.forEach(node => {
        if (node.type === 'object') {
          result[node.code] = this.convertTree(node.children);
        } else {
          result[node.code] = node.value;
        }
      });
      return result;
    }
  }
};
</script>

<style scoped>
.my-component {
  position: relative;
}
.switch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>